<script>
import { ElButton, ElMessage } from 'element-plus';
import { adminList, addAdmin, adminUpdate, adminDelete } from '../../api/user'
import { routes } from '@/router/index.js'
export default {
  data () {
    return {
      adminList: [], // 管理员列表数据
      drawer: false, // 是否显示抽屉
      // 表单中管理员信息
      formData: {
        adminname: '',
        password: '',
        role: '',
        checkedKeys: []
      },
      // 树形组件上要显示的内容
      menus: routes[0].children,
      currentPage: 1, // 当前页面
      dialogVisible: false, // 当前是否打开对话框
      defaultCheckedKeys: [], // 设置树形结构的默认选中项。
      code: null, // 用来标记咱们打开的是添加还是更新，10010代表添加10086代表更新
    };
  },
  computed: {
    tableData () {
      return this.adminList.slice((this.currentPage - 1) * 10, (this.currentPage - 1) * 10 + 10)
    }
  },
  mounted () {
    // 发送数据请求
    adminList().then(res => {
      // console.log("管理员列表: ", res.data);
      this.adminList = res.data;
    });
  },
  methods: {
    handleClose () {
      // 关闭抽屉的方法
      this.drawer = false;
    },
    // 获取树形结构中选中的值
    formatCheckedKeys (code) {

      // 得到用户选中的路由路径
      // getCheckedNodes(true) 传递参数 true 表面我们只获取用户选中的子节点不获取父级节点
      // list 是我们选中的所有的子节点，没有父节点

      const list = code == '10010' ? this.$refs.treeRef1.getCheckedNodes(true) : this.$refs.treeRef2.getCheckedNodes(true)


      // 用来放父级路由的 label 用的数组
      const tempList = []

      // 放最终结果用的
      const result = []

      // 遍历所有被选中的子节点
      list.forEach(item => {
        // item 就是我们选中的内容

        // console.log(item);


        // --------------------- 根据子节点的 label 匹配到父级节点 ------------------------------
        // parent 是用来获取选中后父级路由的对象
        const parent = this.menus.find(mitem => {
          // mitem 二级路由对象
          // mitem.children 三级路由
          // this.menus 所有的路由中匹配到当前 选中的 item 的父级路由
          return mitem.children.some(child => child.label == item.label)
        })
        // --------------------- 根据子节点的 label 匹配到父级节点 ------------------------------


        // 判断当前父级路由是否在 tempList 中已经存在
        if (tempList.includes(parent.label)) {
          // 如果父级路由已经存在
          // 就将当前被选中的 item 放在这个路由的 children 中
          result.find(item => item.label == parent.label).children.push(item)
        } else {
          // 如果不存在，就在对应的 tempList 中添加
          tempList.push(parent.label)
          console.log(parent.icon);
          // 在全部路由中添加一个 父级路由，并且将当前被选中的 子路由 item 加进去
          result.push({
            label: parent.label,
            path: parent.path,
            icon: parent.icon,
            children: [item]
          })
        }


        // console.log('222222222', result);
        // 将用户选中的内容放在 formData
        this.formData.checkedKeys = result
      })





    },
    addClick () {
      this.code = '10010'
      // 调用获取用户选中的权限
      this.formatCheckedKeys('10010')

      // console.log(this.formData);
      addAdmin(this.formData).then(res => {
        // console.log('1111111', res);
        if (res.code == 200) {
          // 添加成功
          // 1. 关闭抽屉效果
          this.drawer = false
          // 2. 刷新表格最新数据
          // 重新获取最新数据
          adminList().then(res => {
            // console.log("管理员列表: ", res.data);
            this.adminList = res.data;
          });


        } else {
          // 添加失败
          ElMessage({
            type: 'error',
            message: res.message
          })
        }
      })

    },
    // 编辑按钮的点击事件
    editClick (row) {
      // 打开对话框
      this.dialogVisible = true
      this.code = '10086'

      this.formData.adminname = row.adminname
      this.formData.password = row.password
      this.formData.role = row.role
      // this.formData.checkedKeys = row.checkedKeys
      // 以前被选上的内容，现在被再次选上

      // 用来放所有被选中的子节点的 path
      // console.log('1111111111111111', row.checkedKeys);
      const list = []
      row.checkedKeys.forEach(parent => {
        if (parent.children) {
          parent.children.forEach(item => {
            list.push(item.path)
          })
        }

      })

      this.defaultCheckedKeys = list

    },
    updateClick () {
      // 获取所有的被选中项

      // console.log(this.formData);
      this.formatCheckedKeys('10086')

      // 将所有内容提交到服务器
      adminUpdate(this.formData).then(res => {
        if (res.code == 200) {
          // 1. 先关闭对话框
          this.dialogVisible = false
          // 2. 重新请求管理员列表
          adminList().then(res => {
            // console.log("管理员列表: ", res.data);
            this.adminList = res.data;
          });
        } else {
          ElMessage({
            type: 'error',
            message: res.message
          })
        }
      })

    },
    delClick (row) {
      adminDelete({
        adminid: row.adminid
      }).then(res => {
        // console.log(res);
        if (res.code == 200) {
          adminList().then(res => {
            // console.log("管理员列表: ", res.data);
            this.adminList = res.data;
          });
        } else {
          ElMessage({
            type: 'error',
            message: res.message
          })
        }

      })
    },
    close () {
      // 关闭对话框和抽屉的时候也要清除掉表单数据
      this.formData.adminname = ''
      this.formData.password = ''
      this.formData.role = ''
      this.formData.checkedKeys = []
      if (this.code == '10010') {
        // 添加
        this.$refs.treeRef1.setCheckedKeys([])
      } else {
        // 更新
        this.$refs.treeRef2.setCheckedKeys([])
      }
    }
  },
  components: { ElButton }
}
</script>
<template>
  <div>

    <h4>管理员列表 <el-button v-if="$store.state.userInfo.adminname == 'admin'" @click="drawer = true"
        type="primary">添加管理员</el-button></h4>

    <!-- el-table 定义的是表格 -->
    <el-table :data="tableData">
      <!-- el-table-column 定义表格中列 -->
      <!-- 第二页的序号要从 11 开始，第三页的数据要从 21 开始 -->
      <el-table-column type="index" label="序号" width="80">
        <template #default="scope">
          <div>
            {{ (currentPage - 1) * 10 + scope.$index + 1 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="adminname" label="管理员名称" />
      <el-table-column prop="role" label="管理员权限">
        <template #default="scope">
          <el-tag :type="scope.row.role == 1 ? '' : 'success'">{{ scope.row.role == 1 ? '管理员' : '超级管理员' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="editClick(scope.row)">编辑</el-button>
          <el-popconfirm title="你确定要删除该用户吗?" @confirm="delClick(scope.row)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>


        </template>
      </el-table-column>

    </el-table>
    <!-- 分页显示 -->
    <el-pagination background v-model:current-page="currentPage" layout="prev, pager, next" :total="adminList.length" />


    <!-- ------------------ 抽屉效果 ----------------------- -->
    <el-drawer @close="close" v-model="drawer" title="添加管理员" :before-close="handleClose">
      <el-form>
        <el-form-item label="管理员账号">
          <el-input placeholder="请输入管理员账号" v-model="formData.adminname" />
        </el-form-item>

        <el-form-item label="管理员密码">
          <el-input placeholder="请输入管理员密码" v-model="formData.password" type="password" />
        </el-form-item>

        <el-form-item label="管理员角色">
          <el-select placeholder="请选择角色" v-model="formData.role">
            <el-option label="管理员" :value="1" />
            <el-option label="超级管理员" :value="2" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-tree :data="menus" ref="treeRef1" :default-expand-all="true" node-key="path" :show-checkbox="true" />
        </el-form-item>

        <el-form-item>
          <el-button @click="addClick" type="primary">
            添加
          </el-button>
        </el-form-item>

      </el-form>
    </el-drawer>
    <!-- ------------------ 抽屉效果 添加 ----------------------- -->


    <!-- --------------- 对话框修改 ------------------- -->
    <el-dialog @close="close" v-model="dialogVisible">
      <el-form>
        <el-form-item label="管理员账号">
          <el-input placeholder="请输入管理员账号" v-model="formData.adminname" />
        </el-form-item>

        <el-form-item label="管理员密码">
          <el-input placeholder="请输入管理员密码" v-model="formData.password" type="password" />
        </el-form-item>

        <el-form-item label="管理员角色">
          <el-select placeholder="请选择角色" v-model="formData.role">
            <el-option label="管理员" :value="1" />
            <el-option label="超级管理员" :value="2" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-tree :data="menus" ref="treeRef2" :default-checked-keys="defaultCheckedKeys" :default-expand-all="true"
            node-key="path" :show-checkbox="true" />
        </el-form-item>

        <el-form-item>
          <el-button @click="updateClick" type="primary">
            提交
          </el-button>
        </el-form-item>

      </el-form>
    </el-dialog>
    <!-- --------------- 对话框修改 ------------------- -->

  </div>
</template>
